<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script src="/natal/js/rem.js"></script>
    <link rel="stylesheet" href="/natal/css/style.css?v=34">
    <link rel="stylesheet" href="/natal/css/love.css?v=34">
    <title>本命预测</title>
    <script> //友盟打点
    var SITE_ID = "{$site_id}";
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id='+SITE_ID+'&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
    //声明_czc对象:
    var _czc = _czc || [];
    //绑定siteid，请用您的siteid替换下方"XXXXXXXX"部分

    _czc.push(["_trackEvent", SITE_ID]);//页面事件
    _czc.push(["_setCustomVar", SITE_ID]);//访客类型
    _czc.push(["_trackPageview", SITE_ID]);//页面PV
    _czc.push(["_setAutoPageview", SITE_ID]);//是否自动发送页面PV的统计请求
    </script>
</head>
<body>
<script>
    _czc.push(["_trackPageview","/恋爱报告详情页"]);
</script>
<div class="money-report">
    <!--下载条-->
    {if $is_show_download_bar===1}<a href="https://at.umtrack.com/onelink/TPzKDm" style="margin: 0;padding:0;"><img src="{$oss}/mini/astrolabe/h5/download_bar.png"
     style="width: 100%;height: 0.88rem"></a>{/if}
    <!--导航栏-->
    <div id="navigate" class="navigate" style="width: 100%;height: 0.88rem;display: flex;flex-direction:row;
  justify-content:space-between;
  align-items:center;z-index:1000;">
        <a href="{$callback_url}"><img src="{$oss}/mini/astrolabe/h5/back.png" style=" width: 0.14rem;height: 0.26rem;margin-left: 0.4rem;"/></a>
        <div style=" height: 0.26rem;font-size: 0.26rem;display: flex;align-items:center; font-weight:600;color:rgba(20,27,36,1);">报告详情</div>
        <a href="{$astro_home_page}"><img src="{$oss}/mini/astrolabe/h5/home.png" style=" width: 0.26rem;height: 0.26rem;margin-right: 0.4rem;"/></a>
    </div>
    <div class="nav" style="visibility:{$is_show_nav?'visible':'hidden'}">
        <div class="nav-box">
            <div class="bg-color" style="height: {$height/50 + 0.88}rem"></div>
            <div class="to-back" onclick="commonJsToNative('local', 'back');">
                <div class="img"></div>
            </div>
            <div class="title-name">{$data.name}</div>
        </div>
    </div>
    <div class="header-box header-box{$height}"></div>
    <div class="middle-box">
        <div class="top-box" style="margin-top:-0.16rem">
            <div class="bg-box">
                <img class="top-box-img" src="/natal/images/top-img-love.png" alt="">
                <div class="text-box">
                    <p class="pre-text">{$text.text1}</p>
                </div>
            </div>
        </div>
        <div class="curv-box">
            <div class="curv-title scrollTitle" data-index="m-1">
                <img src="/natal/images/curv-title-love.png" alt="">
            </div>
            <div class="curv-area">
                <div class="curv-area-content">
                    <canvas id="curv">canvas</canvas>
                </div>
            </div>
            <div class="curv-tips">
                <div class="good"><i></i>恋爱机遇较多的时期</div>
                <div class="bad"><i></i>恋爱机遇较少的时期</div>
            </div>
        </div>
        <div class="content-box">
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-2">
                    <img src="/natal/images/title-lagnzs.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 pre-text">{$text.text2}</p>
                </div>
                <div class="title-item5 scrollTitle" data-index="m-2-1">
                    <img class="img-title" src="/natal/images/title-dladjbtd-love.png" alt="">
                    <br>
                    <img class="img-icon" src="/natal/images/title-icon-money.png" alt="">
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[1]['content_text'][110000]??'无词条'}</p>
                </div>
                <div class="title-item3 scrollTitle" data-index="m-2-2">
                    <span class="title-name type2">正面影响</span>
                    <div class="item-level" style="font-size: 0;">
                        <span class="name">影响星级</span>
                        {for start='0' end="$data.text[1]['levels'][0]"}
                        <span class="star"></span>
                        {/for}
                    </div>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[1]['content_text'][110001]??'无词条'}</p>
                </div>
                <div class="title-item3 scrollTitle" data-index="m-2-3">
                    <span class="title-name type1">不利影响</span>
                    <div class="item-level" style="font-size: 0;">
                        <span class="name">影响星级</span>
                        {for start='0' end="$data.text[1]['levels'][1]"}
                        <span class="star"></span>
                        {/for}
                    </div>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[1]['content_text'][110002]??'无词条'}</p>
                </div>
                <div class="divider"></div>
                <div class="title-item5 scrollTitle" data-index="m-2-2">
                    <img class="img-title" src="/natal/images/title-aqaqgly-love.png" alt="">
                </div>
                <div class="t3-box" style="margin-top: 0.54rem;margin-bottom: 1rem">
                    {foreach name="$data.text[1]['content_text'][110003]" item='v'}
                    <div class="love-item"><span>{$v}</span></div>
                    {/foreach}
                </div>
            </div>
            <div class="item-line"></div>
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-3">
                    <img src="/natal/images/title-ladxfx-love.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 t1-1 pre-text">{$text.text3}</p>
                </div>
                <!--                第一个   二级标题-->
                <div class="title-item2 scrollTitle" data-index="m-3-1">
                    <img src="/natal/images/title-dfdlx-love.png" alt="">
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[2]['content_text'][110100]??'无词条'}</p>
                </div>
                <!--                第一个   二级标题-->
                <div class="title-item2 scrollTitle" data-index="m-3-2">
                    <img src="/natal/images/title-dfdtj-love.png" alt="">
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[2]['content_text'][110101]??'无词条'}</p>
                </div>
                <!--                第一个   二级标题-->
                <div class="title-item2 scrollTitle" data-index="m-3-3">
                    <img src="/natal/images/title-nmdxstj-love.png" alt="">
                </div>
                <div class="t3-box" style="margin-bottom: 1rem">
                    <p class="t3 pre-text">{$data.text[2]['content_text'][110102]??'无词条'}</p>
                </div>
            </div>
            <div class="item-line"></div>
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-4">
                    <img src="/natal/images/title-lafzqkfx-love.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 t1-1 pre-text">{$text.text4}</p>
                </div>
                <!--                第一个   二级标题-->
                <div class="title-item2 scrollTitle" data-index="m-4-1">
                    <img src="/natal/images/title-yxthdg-love.png" alt="">
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][110200]??'无词条'}</p>
                </div>
                <!--                第一个   二级标题-->
                <div class="title-item2 scrollTitle" data-index="m-4-2">
                    <img src="/natal/images/title-aqsfss-love.png" alt="">
                </div>
                <!--                <div class="t1-box">-->
                <!--                    <p class="t1 t1-2"></p>-->
                <!--                </div>-->
                <div class="title-item3">
                    <span class="title-name type2">顺利影响分析</span>
                    <div class="item-level" style="font-size: 0;">
                        <span class="name">影响星级</span>
                        {for start='0' end="$data.text[3]['levels'][0]"}
                        <span class="star"></span>
                        {/for}
                    </div>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][11020100]??'无词条'}</p>
                </div>
                <div class="title-item3">
                    <span class="title-name type1">困难影响分析</span>
                    <div class="item-level" style="font-size: 0;">
                        <span class="name">影响星级</span>
                        {for start='0' end="$data.text[3]['levels'][1]"}
                        <span class="star"></span>
                        {/for}
                    </div>
                </div>
                <div class="t3-box" style="margin-bottom: 1rem">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][11020101]??'无词条'}</p>
                </div>
            </div>
            <div class="item-line"></div>
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-5">
                    <img src="/natal/images/title-laxcfsjy-love.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 t1-1 pre-text">{$text.text5}</p>
                </div>
                <!--                第一个   二级标题-->
                <div class="title-item2 scrollTitle" data-index="m-5-1">
                    <img src="/natal/images/title-nkyzmz-love.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="pre-text love-item-p">{$data.text[4]['content_text'][110300]??'无词条'}</p>
                </div>
                <!--                第一个   二级标题-->
                <div class="title-item2 scrollTitle" data-index="m-5-2">
                    <img src="/natal/images/title-nbkyzmz-love.png" alt="">
                </div>
                <div class="t1-box" style="margin-bottom: 1rem">
                    <p class="pre-text love-item-p">{$data.text[4]['content_text'][110301]??'无词条'}</p>
                </div>
            </div>
        </div>
        <div class="bottom-box">
            <div class="bg-box">
                <div class="text-box">
                    <p class="pre-text">{$text.end_desc}</p>
                </div>
            </div>
            <img class="bt-star" src="/natal/images/star_name.png" alt="">
            <img class="bt-img" src="/natal/images/star_bottom.png" alt="">
        </div>
    </div>
    <!--    抽屉-->
    <div class="menu-box">
        <div class="menu-button">
            <img src="/natal/images/menu-button_love.png" alt="目录"/>
        </div>
        <div class="menu-shadow" id="menu-shadow"></div>
        <div class="menu-list">
            <div class="menu-title">
                <span class="head">目录</span>
                <i class="collapse"></i>
            </div>
            <dl>
                <dt data-index="m-1">1/一生的感情运势高低</dt>
            </dl>
            <dl>
                <dt data-index="m-2">2/恋爱观念综述</dt>
                <dd>
                    <ul>
                        <li data-index="m-2-1"><i class="circle"></i>基本态度</li>
                        <li data-index="m-2-2"><i class="circle"></i>正面影响</li>
                        <li data-index="m-2-3"><i class="circle"></i>不利影响</li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt data-index="m-3">3/恋爱对象分析</dt>
                <dd>
                    <ul>
                        <li data-index="m-3-1"><i class="circle"></i>对方的类型</li>
                        <li data-index="m-3-2"><i class="circle"></i>对方的条件</li>
                        <li data-index="m-3-3"><i class="circle"></i>你们的相识途径</li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt data-index="m-4">4/恋爱发展情况分析</dt>
                <dd>
                    <ul>
                        <li data-index="m-4-1"><i class="circle"></i>异性桃花多寡</li>
                        <li data-index="m-4-2"><i class="circle"></i>爱情是否顺遂</li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt data-index="m-5">5/另一半与你恋爱相处建议</dt>
                <dd>
                    <ul>
                        <li data-index="m-5-1"><i class="circle"></i>可以这么做</li>
                        <li data-index="m-5-2"><i class="circle"></i>不可以这么做</li>
                    </ul>
                </dd>
            </dl>
        </div>
    </div>
</div>
<script>
    window.navHeight = {$height};
    window.levels = {$levels};
    window.appType = '{$appType}';
    window.version = '{$version}';
    window.isShow = 1; // 1抽屉隐藏 2抽屉显示

    window.onscroll=function(){
        let topScroll = document.documentElement.scrollTop || document.body.scrollTop;//滚动的距离,距离顶部的距离
        console.log(topScroll)
        var bignav = document.getElementById("navigate");//获取到导航栏id
        if(topScroll <= 88){
            //当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
            bignav.style.position = 'static';
        }else{
            //当滚动距离大于88px时执行下面的东西
            bignav.style.position = 'fixed';
            bignav.style.top = '0%';
            bignav.style.right = '0%';
            bignav.style.background = '#FFFFFF';
        }
    }

</script>
<script type="text/javascript" src="/natal/js/jquery-v2.1.1.min.js"></script>
<script type="text/javascript" src="/natal/js/common.js?v=36"></script>
<script type="text/javascript" src="/natal/js/canvas.js?v=34"></script>
<script type="text/javascript">
    window.onload = function () {
        window.drawCanvas.colors = ['#F2B7C1', '#FFD0DB'];
        window.drawCanvas.initload('curv', window.levels, 0);
    }
</script>
{include file="../apps/web/view/public/sensors.html" /}
</body>
</html>
